<template>
  <div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="客户类型" prop="userType">
        <el-radio v-model="ruleForm.userType" label="1">会员</el-radio>
        <el-radio v-model="ruleForm.userType" label="2">普通客户</el-radio>
      </el-form-item>
      <el-form-item label="客户姓名" prop="userName">
        <el-input
          v-model="ruleForm.userName"
          placeholder="不超过16个字符"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="userPhone">
        <el-input
          v-model="ruleForm.userPhone"
          placeholder="请输入手机号"
        ></el-input>
      </el-form-item>
      <el-form-item label="成长值">
        <el-input
          v-model="ruleForm.userGrowthValue"
          placeholder="不填为零,上限10亿"
        ></el-input>
      </el-form-item>
      <el-form-item label="可用实充金额">
        <el-input
          v-model="ruleForm.userNetbalance"
          placeholder="不填为零,上限95万"
        ></el-input>
      </el-form-item>
      <el-form-item label="可用赠送金额">
        <el-input
          v-model="ruleForm.userGiftbalance"
          placeholder="不填为零,上限95万"
        ></el-input>
      </el-form-item>
      <el-form-item label="可用积分">
        <el-input
          placeholder="不填为零,上限10亿"
          v-model="ruleForm.userAvailableintegral"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="ruleForm.userSex" placeholder="请选择">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="生日" placeholder="请选择日期">
        <el-date-picker
          v-model="ruleForm.userBirthday"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="地址">
        <el-input
          v-model="ruleForm.userAdressPC"
          maxlength="15"
          placeholder="请输入省市区"
        ></el-input>
        <el-input
          type="textarea"
          placeholder="请输入详细地址"
          v-model="ruleForm.userDetailAddress"
          maxlength="20"
          show-word-limit
        >
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { Addclient } from "@/api/client";
export default {
  data() {
    return {
      ruleForm: {
        userName: "",
        userPhone: "",
        userType: 1,
        userGrowthValue: "",
        userNetbalance: "",
        userGiftbalance: "",
        userAvailableintegral: "",
        userSex: "",
        userBirthday: "",
        userAdressPC: "",
        userDetailAddress: "",
        loginName: "",
        loginPassword: "123456",
      },
      rules: {
        userType: [{ required: true, message: "不能为空", trigger: "blur" }],
        userName: [
          { required: true, message: "请输入客户姓名", trigger: "blur" },
        ],
        userPhone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    addclient() {
      let _this = this;
      this.ruleForm.loginName = this.ruleForm.userName;

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          Addclient(this.ruleForm).then((res) => {
            if (res.data) {
              this.$message({
                message: "添加成功",
                type: "success",
                onClose: function () {
                  _this.$emit("saveclient");
                },
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>